<%-- 
    Document   : storeItems
    Created on : Feb 23, 2015, 6:18:00 PM
    Author     : vinod
--%>

<%@page import="org.shop.domain.Administrator"%>
<%@page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Shop Inventory | Store</title>
        <link type="text/css" rel="stylesheet" href="css/semantic.min.css"/>
        <script type="text/javascript" src="js/jquery.js"></script>
        <script type="text/javascript" src="js/jquery-ui.min.js"></script>
        <script type="text/javascript" src="js/semantic.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $.getScript("js/myScript.js");
                $(".ui.red.message").hide();
                $('.ui.form').form({
                    itemId: {
                        identifier: 'itemId',
                        rules: [
                            {
                                type: 'empty',
                                prompt: 'Please Enter Item Id'
                            }
                        ]
                    },
                    itemName: {
                        identifier: 'itemName',
                        rules: [
                            {
                                type: 'empty',
                                prompt: 'Please Enter Item Name'
                            }
                        ]
                    },
                    noItems: {
                        identifier: 'noItems',
                        rules: [
                            {
                                type: 'empty',
                                prompt: 'Please Enter Number Of Items'
                            }
                        ]
                    },
                    singleItemPrice: {
                        identifier: 'singleItemPrice',
                        rules: [
                            {
                                type: 'empty',
                                prompt: 'Please Enter single Item Price'
                            }
                        ]
                    },
                    totalItemsPrice: {
                        identifier: 'totalItemsPrice',
                        rules: [
                            {
                                type: 'empty',
                                prompt: 'Please Enter Item Price'
                            }
                        ]
                    },
                    factory: {
                        identifier: 'factory',
                        rules: [
                            {
                                type: 'empty',
                                prompt: 'Please Enter factory name'
                            }
                        ]
                    }
                },
                {
                    inline: true,
                    on: 'blur'
                });

                $("#itemId").on('input', function() {
                    getKeyDetails();
                });
                $("#singleItemPrice").on('input', function() {
                    var itemPrice = $("#singleItemPrice").val();
                    var totalItems = $("#noItems").val();
                    var res = (parseInt(itemPrice) * parseInt(totalItems));
                    $("#totalPrice").val(res);
                });
            });


        </script>
    </head>
    <body>

        <%@include file="storeMenu.jsp" %>

        <div class="ui form segment" id="itemAddForm">
            <form method="POST" action="${pageContext.request.contextPath}/additem">
                <div class="field" id="itemDiv">
                    <label>Item Id</label>
                    <div class="ui left icon input">
                        <input type="text" id="itemId" name="itemId" placeholder="Item Id"/>
                        <i class="user icon"></i>
                    </div>
                </div>
                <div class="ui red message"></div>
                <div class="field">
                    <label>Item Name</label>
                    <div class="ui left icon input">
                        <input type="text" id="itemName" name="itemName"/>
                        <i class="mobile icon"></i>
                    </div>
                </div>
                <div class="field">
                    <label>No.Of Items</label>
                    <div class="ui left icon input">
                        <input type="number" id="noItems" name="noItems" placeholder="No.Of Items"/>
                        <i class="home icon"></i>
                    </div>
                </div>
                <div class="two fields">

                    <div class="field">
                        <label>Item Price</label>
                        <div class="ui left icon input">
                            <input type="number" id="singleItemPrice" name="singleItemPrice" placeholder="Items Price"/>
                            <i class="location icon"></i>
                        </div>
                    </div>
                    <div class="field">
                        <label>Total Items Price</label>
                        <div class="ui left icon input">
                            <input type="number" id="totalPrice" name="totalItemsPrice" value="0" placeholder="Total Items Price"/>
                            <i class="location icon"></i>
                        </div>
                    </div>

                </div>

                <div class="field">
                    <label>Factory Name</label>
                    <div class="ui left icon input">
                        <input type="text" id="factory" name="factory" placeholder="Factory Name"/>
                        <i class="location icon"></i>
                    </div>
                </div>
                <input type="submit" class="ui blue button" value="Submit"/>
                <input type="reset" class="ui red button" value="Clear"/>
            </form>
            <c:if test="${not empty status}">
                <c:out value="${status}"/>
            </c:if>
        </div>

    </body>
</html>
